<template>
<div>


    <form class="form-horizontal" @submit.prevent="register">
        <div class="form-group" :class="{'has-error' : errors.has('name') }">
            <label for="name" class="col-md-3 control-label">用户名</label>
            <div class="col-md-7">
                <input v-model="name"
                       v-validate data-vv-rules="required|min:2" data-vv-as="用户名"
                       id="name" type="text" class="form-control" name="name" required>
                <span class="help-block" v-show="errors.has('name')">{{errors.first('name')}}</span>
            </div>
        </div>
        <div class="form-group" :class="{'has-error' : errors.has('email') }">
            <label for="email" class="col-md-3 control-label">邮箱</label>
            <div class="col-md-7">
                <input v-model="email"
                       v-validate data-vv-rules="required|email" data-vv-as="邮箱"
                       id="email" type="email" class="form-control" name="email" required>
                <span class="help-block" v-show="errors.has('email')">{{errors.first('email')}}</span>
            </div>
        </div>
        <div class="form-group" :class="{'has-error' : errors.has('password') }">
            <label for="password" class="col-md-3 control-label">密码</label>
            <div class="col-md-7">
                <input v-model="password"
                       v-validate data-vv-rules="required|min:6" data-vv-as="密码"
                       id="password" type="password" class="form-control" name="password" required>
                <span class="help-block" v-show="errors.has('password')">{{errors.first('password')}}</span>
            </div>
        </div>
        <div class="form-group" :class="{'has-error' : errors.has('password_confirmation') }">
            <label for="password-confirm" class="col-md-3 control-label">确认密码</label>
            <div class="col-md-7">
                <input id="password-confirm"
                       v-validate data-vv-rules="required|min:6|confirmed:password" data-vv-as="确认密码"
                       type="password" class="form-control" name="password_confirmation" required>
                <span class="help-block" v-show="errors.has('password_confirmation')">{{errors.first('password_confirmation')}}</span>
            </div>
        </div>
       
        <div class="form-group">
            <div class="col-md-6 col-md-offset-4">
                <button type="submit" class="btn btn-primary">
                    注册
                </button>
            </div>
        </div>
        
    </form>
     <!-- 临时验证码测试 -->
        <div style="height: 350px">
            <label class="col-md-3">输入验证码</label>
            <div class="col-md-7">
                <input type="text" v-model="veriNum">
                
            </div>
            <input @click.stop="veriBtn" type="button" value="发送验证码"/>
        </div>
        <!--  -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name : '',
                email : '',
                password : '',
                veriNum : ""
            }
        },
        methods:{
            register() {
                let formData = {
                    name : this.name,
                    email : this.email,
                    password : this.password,
                    veriNum : this.veriNum
                }
               return axios.post('/register',formData).then(response => {
                    this.$router.push({name:'confirm'})
                })
            },
            veriBtn () {
                // var 
                // var json=JSON.parse(msg.responseText);
                axios.post('/sendcode',{"title":this.veriNum}).then(response => {
                    // console.log(response)
                }).catch(error=>{
                    console.log(error)
                }) 
                $.ajax({        
                    type: "POST",
                    url:'http://js.com/api/sendcode',
                    data:{"title":this.veriNum},
                    dataType:'json',
                    success: function(res) {
                        alert(res.msg);
                    },
                    /* error : function (msg) {
                        console.log(msg)     
                        if (msg.status == 422) {
                            var json=JSON.parse(msg.responseText);
                            console.log(msg)                    
                           
                        
                        } else {
                            alert('服务器连接失败');
                            return ;
                        }
                    } */
                    error: function(data){
                        var errors = data.responseJSON;
                        //这里理论上可以捕捉错误
                    }
                });
                
                

            }
        }
    }
</script>